<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自动播放——幻灯片效果</title>
    <style>
      body,
      div,
      ul,
      li {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style-type: none;
      }
      body {
        background: #000;
        text-align: center;
        font: 12px/20px Arial;
      }
      #box {
        position: relative;
        width: 492px;
        height: 172px;
        background: #fff;
        border-radius: 5px;
        border: 8px solid #fff;
        margin: 10px auto;
      }
      #box .list {
        position: relative;
        width: 490px;
        height: 170px;
        /* overflow: hidden; */
        border: 1px solid #ccc;
      }
      #box .list li {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: 0.3s;
      }
      #box .list li.show {
        opacity: 1;
        /* z-index: 2; */
      }
      #box .count {
        position: absolute;
        right: 0;
        bottom: 5px;
      }
      #box .count li {
        color: #fff;
        float: left;
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: 5px;
        overflow: hidden;
        background: #f90;
        opacity: 0.7;
        border-radius: 20px;
      }
      #box .count li.current {
        color: #fff;
        opacity: 1;
        font-weight: 700;
        background: #f60;
      }
      #tmp {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <ul class="list">
        <li class="show">
          <img src="img/01.jpg" width="490" height="170" />
        </li>
        <li><img src="img/02.jpg" width="490" height="170" /></li>
        <li><img src="img/03.jpg" width="490" height="170" /></li>
        <li><img src="img/04.jpg" width="490" height="170" /></li>
        <li><img src="img/05.jpg" width="490" height="170" /></li>
      </ul>
      <ul class="count">
        <li class="current" data-index="0">1</li>
        <li data-index="1">2</li>
        <li data-index="2">3</li>
        <li data-index="3">4</li>
        <li data-index="4">5</li>
      </ul>
    </div>
    <script>
      let box = document.getElementById("box");
      let slides = document.querySelectorAll(".list li");
      let numbers = document.querySelectorAll(".count li");
      let countEle = document.querySelector(".count");
      //设置一个全局变量，存储当前幻灯片的索引值
      let index = 0;
      //幻灯片的数量
      let count = slides.length;
      //自动启动轮播图，把play函数返回值赋给全局变量timer
      let timer = play();
      //定义自动播放幻灯片函数
      function play() {
        //设置一个定时器
        let timer = setInterval(function() {
          //清除所有幻灯片（slides）的'show'类,和数字指示器（numbers）的'current'类
          clearClass();
          //根据索引获取当前要显示的幻灯片
          let currentSlide = slides[index];
          //根据索引获取当前要激活的数字指示器
          let currentNumber = numbers[index];
          //给要显示的幻灯片加上类 'show'
          currentSlide.classList.add("show");
          //给要激活的数字指示器加上类 'current'
          currentNumber.classList.add("current");
          //切换后索引+1
          ++index;
          //如果索引值和幻灯片的数量相等，索引归0
          if (index == count ) {
            index = 0;
          }
        }, 500);
        //返回定时器id
        return timer;
      }
      //box添加mouseenter事件
      box.addEventListener("mouseenter", function() {
        //当鼠标进入box，获取全局变量timer，停止当前的定时器
        clearInterval(timer);
      });

      box.addEventListener("mouseleave", function() {
        //当鼠标离开box，调用play函数，开始播放幻灯片，返回该定时器id,并赋值给全局变量timer
        timer = play();
      });
      //切换幻灯片函数，传入形参i
      function changeSlide(i) {
        let currentNumber = numbers[i];
        let currentSlide = slides[i];
        //清除所有幻灯片（slides）的'show'类,和数字指示器（numbers）的'current'类
        clearClass();
        currentNumber.classList.add("current");
         //给要显示的幻灯片加上类 'show'
        currentSlide.classList.add("show");
        //把全局变量index值设为改变后的索引
        index = i;
      }

      function clearClass() {
        //通过forEach循环，遍历每一个元素，删除元素的class
        numbers.forEach(function(el) {
          el.classList.remove("current");
        });
        slides.forEach(function(el) {
          el.classList.remove("show");
        });
      }
      //通过事件代理的方式给ul.count元素添加监听一个点击事件函数
      countEle.addEventListener("click", function(e) {
        //获得被点击的元素
        var clickedEle = e.target;
        //判断被点击的元素是否是li,可能存在被点击的元素是自己，因为li之间存在空袭
        if (clickedEle.tagName == "LI") {
          //如果点击的是li，则获取元素的data-index属性值
          let i = clickedEle.dataset.index;
          //调用切换幻灯片函数，传入索引
          changeSlide(i);
        }
      });
    </script>
  </body>
</html>
